<template>
    <div class="main">
    <div class="mleft">
                <ul class="cate_menu">
                    <li class="cate_menu_item" data-index="1" clstag="h|keycount|h|keycount|head|category_01a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html">家用电器</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="2" clstag="h|keycount|h|keycount|head|category_02a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA&amp;enc=utf-8&amp;wq=%E6%89%8B%E6%9C%BA&amp;pvid=8858151673f941e9b1a4d2c7214b2b52">手机</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/hEFfzNmUqhjLxLgGCcpbDXSMYkP/index.html?babelChannel=ttt49">运营商</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E6%95%B0%E7%A0%81&amp;enc=utf-8&amp;wq=%E6%95%B0%E7%A0%81&amp;pvid=34b0fcf7ed434840a74c057bc97be346">数码</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="3" clstag="h|keycount|h|keycount|head|category_03a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/31XPWPTonxJ9e5YoQ85HS7z8XNYQ/index.html?babelChannel=ttt40">电脑</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/3Sn1bAr73mUmVRFTHwgi8emZmd3Y/index.html?babelChannel=ttt3">办公</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//list.jd.com/list.html?cat=37462">文具用品</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="4" clstag="h|keycount|h|keycount|head|category_04a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//list.jd.com/list.html?cat=1620">家居</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=家具&amp;enc=utf-8&amp;pvid=1c58265e1904499a9c1d9c7847b7b962">家具</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E5%AE%89%E8%A3%85&amp;enc=utf-8&amp;wq=%E5%AE%89%E8%A3%85&amp;pvid=97bb21465c894defaccfc1f197896150">家装</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E5%8E%A8%E5%85%B7&amp;enc=utf-8&amp;wq=%E5%8E%A8%E5%85%B7&amp;pvid=7bdf296458744f4d8d17be5fbdaed59a">厨具</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="5" clstag="h|keycount|h|keycount|head|category_05a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/32EphPL81Mb6FD4qLCTtYmd31YXr/index.html">男装</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/DpSh7ma8JV7QAxSE2gJNro8Q2h9/index.html?babelChannel=ttt56">女装</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//list.jd.com/list.html?cat=1319,11842">童装</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/4PgpL1xqPSW1sVXCJ3xopDbB1f69/index.html">内衣</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="6" clstag="h|keycount|h|keycount|head|category_06a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/2kmaPNrGDNYo1LKwYtRoaSmsgbj6/index.html">美妆</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=个护清洁&amp;enc=utf-8&amp;wq=个护清洁&amp;pvid=261b201c58c643d88b3722d66158dd67">个护清洁</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/2TY2j1yJ9T2QKiQekTpHgvv68HiD/index.html">宠物</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="7" clstag="h|keycount|h|keycount|head|category_07a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/4RXyb1W4Y986LJW8ToqMK14BdTD/index.html?babelChannel=ttt47">女鞋</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/ZrH7gGAcEkY2gH8wXqyAPoQgk6t/index.html?babelChannel=ttt4">箱包</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/2BcJPCVVzMEtMUynXkPscCSsx68W/index.html">钟表</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/22DpAdd48C4fU3cBRkeYSM87WhWV/index.html?babelChannel=ttt148">珠宝</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="8" clstag="h|keycount|h|keycount|head|category_08a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/4RXyb1W4Y986LJW8ToqMK14BdTD/index.html?babelChannel=ttt47">男鞋</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/oKAAQpTfmbKWmL338JdgxNDeWK2/index.html">运动</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/2MG8bJwgHvAqAZ9PamfCp3pDuthL/index.html">户外</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="9" clstag="h|keycount|h|keycount|head|category_09a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//xinfang.jd.com/">房产</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//list.jd.com/list.html?cat=12379">汽车</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//list.jd.com/list.html?cat=6728">汽车用品</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="10" clstag="h|keycount|h|keycount|head|category_10a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E6%AF%8D%E5%A9%B4&amp;enc=utf-8&amp;wq=%E6%AF%8D%E5%A9%B4&amp;pvid=3e86f063795740d594b1bb1187e02063">母婴</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E7%8E%A9%E5%85%B7%E4%B9%90%E5%99%A8&amp;enc=utf-8&amp;wq=%E7%8E%A9%E5%85%B7%E4%B9%90%E5%99%A8&amp;pvid=6acae74f0ea34c6a8db6b5563f1a24d1">玩具乐器</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="11" clstag="h|keycount|h|keycount|head|category_11a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E9%A3%9F%E5%93%81&amp;enc=utf-8&amp;wq=%E9%A3%9F%E5%93%81&amp;pvid=b22bb1ad1cb045aa989753d21f73c228">食品</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=中外名酒&amp;enc=utf-8&amp;wq=中外名酒&amp;pvid=16e1724bdc294613b5c43df42878baba">酒类</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//fresh.jd.com">生鲜</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/41YdRWconKueXwVVnLLM6YY4x4wU/index.html">特产</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="12" clstag="h|keycount|h|keycount|head|category_12a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=艺术品&amp;enc=utf-8&amp;wq=艺术品&amp;pvid=5928d0db63e24f479330f2922ea1b0d7">艺术</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E9%B2%9C%E8%8A%B1&amp;enc=utf-8&amp;wq=%E9%B2%9C%E8%8A%B1&amp;pvid=0aad3e1477ad46829f14f3cb19b25b0a">礼品鲜花</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/CYivQ3Q2U5zCcgqGDXeGzzWn5XF/index.html">农牧园艺</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="13" clstag="h|keycount|h|keycount|head|category_13a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E4%BA%AC%E4%B8%9C%E4%B9%B0%E8%8D%AF&amp;enc=utf-8&amp;wq=%E4%BA%AC%E4%B8%9C%E4%B9%B0%E8%8D%AF&amp;pvid=d605a440ef96406f9dedbe3e8ddc9dbd">京东买药</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E8%AE%A1%E7%94%9F%E6%83%85%E8%B6%A3&amp;enc=utf-8&amp;wq=%E8%AE%A1%E7%94%9F%E6%83%85%E8%B6%A3&amp;pvid=e8284db88df24f919dfc31e5536bbf64">计生情趣</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="14" clstag="h|keycount|h|keycount|head|category_14a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/3sAaxodHF7kfo3s95cjxo2UZUxu2/index.html">图书</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/2TxxbZnqAm7M8tkDpTN3VJNtoSKo/index.html">文娱</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD%E8%AF%BE%E7%A8%8B&amp;enc=utf-8&amp;wq=%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD%E8%AF%BE%E7%A8%8B&amp;pvid=04dff2bdd3694c96ab68337e9fc4c6b2">教育</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//e.jd.com/">电子书</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="15" clstag="h|keycount|h|keycount|head|category_15a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//jipiao.jd.com/">机票</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//hotel.jd.com/">酒店</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//pro.jd.com/mall/active/zMyuWCEMidq8GZQjgxwm4G8LRC7/index.html">旅游</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//ish.jd.com/">生活</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="16" clstag="h|keycount|h|keycount|head|category_16a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//www.jdpay.com/home/">支付</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//baitiao.jd.com">白条</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//prodev.jd.com/mall/active/3i11dVqMyKjD3RdMkj5DsLy4aCur/index.html">保险</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//qyjr.jddglobal.com/ ">企业金融</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="17" clstag="h|keycount|h|keycount|head|category_17a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=安装&amp;enc=utf-8&amp;wq=安装&amp;pvid=97bb21465c894defaccfc1f197896150">安装</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=维修&amp;enc=utf-8&amp;wq=维修&amp;pvid=eba9b7454da0494c960f074db37be847">维修</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//search.jd.com/Search?keyword=%E6%B8%85%E6%B4%97&amp;enc=utf-8&amp;wq=%E6%B8%85%E6%B4%97&amp;pvid=5b8c10e5e1d242fa931e2c6bca2e4624">清洗</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//2.jd.com/">二手</a>
                                                                                                                                </li>
                                                    <li class="cate_menu_item" data-index="18" clstag="h|keycount|h|keycount|head|category_18a">
                                                                                                <a target="_blank" class="cate_menu_lk" href="//ic.jd.com">元器件</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//i-search.jd.com/search?keyword=%E5%8E%9F%E6%9D%90%E6%96%99&amp;enc=utf-8&amp;qrst=1&amp;rt=1&amp;stop=1&amp;vt=2&amp;cid2=21667#J_searchWrap&amp;tktk=eyJxdWVyeSI6IuWOn">原材料</a>
                                                                            <span class="cate_menu_line">/</span>
                                                                                                    <a target="_blank" class="cate_menu_lk" href="//mro.jd.com">五金机电</a>
                                                                                                                                </li>
                                            </ul>
            </div>
            <div class="mmid">
                <label class="goods-item">
                    <div class="goods-pic">
                        <img src="@/assets/picture/HomeView/logo.png" alt="" width="100px">
                    </div>
                    <div>{{ "商品名称" }}</div>
                    <div class="price_wapper">
                        <span class="price" style="color: #ff6200; font-size: 25px;">¥{{ "100" }}</span>
                        <span>{{ "111" }}已购买</span>
                    </div>
                </label>
            </div>
            <div class="mright">
                <div class="usr_info">
                    <div class="usr_head">
                        <img class="J_UserMemberAvatar member-avatar" src="//wwc.alicdn.com/avatar/getAvatar.do?userNick=&amp;width=60&amp;height=60&amp;type=sns&amp;_input_charset=UTF-8" style="border-radius: 50%;">
                        <div>{{ t_username }}</div>
                    </div>
                    <div class="usr_button">
                            <el-button type="success" @click="goToLogin"> 登录</el-button>
                            <el-button type="info" @click="goToRegister">注册</el-button>
                            <el-button type="warning" @click="goToApplyshop">开店</el-button>
                    </div>
                </div>
                <div class="usr_mytao">
                    <a class="mytao_contect" href="#">
                        <el-icon><Star /></el-icon>
                        <p>宝贝收藏</p>
                    </a>
                    <a class="mytao_contect">
                        <el-icon><Goods /></el-icon>
                        <p>买过的店</p>
                    </a>
                    <a class="mytao_contect">
                        <el-icon><ShoppingCartFull /></el-icon>
                        <p>收藏的店</p>
                    </a>
                    <a class="mytao_contect">
                        <el-icon><AlarmClock /></el-icon>
                        <p>我的足迹</p>
                    </a>
                </div>
                <el-card>  
                    <template #header>到店特价</template>
                    <a href="#">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" width="150px"/>
                    </a>
                </el-card>
            </div>
        </div>
</template>
<script setup lang="ts">
    import router from '@/router/index'
    import { ref,onMounted } from 'vue';
    const goToLogin = () => router.push('/userinfoget/login');
    const goToRegister = () => router.push('/userinfoget/register');
    const goToApplyshop = () => router.push('/userinfoget/applyshop');
    const t_username = ref('')
    onMounted(()=>{
        const user_info=JSON.parse(localStorage.getItem('user_info')?localStorage.getItem('user_info')!:'{}')
        if(user_info){
            t_username.value=user_info.userName;
        }
    })
</script>
<style scoped>
    ul {  
        list-style-type: none;  
    }
    p{
        font-size: 10px;
    }
    a{
        text-decoration: none;
        color:#50607A;
    }
    a:hover{
        color:#f22e00;
        cursor: pointer;
    }
    .whole{
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }
    .header{
        display: flex;
        flex-flow: column nowrap;
    }
    .main{
        flex:0 0 auto;
        box-sizing: border-box;
        margin: 40px 5%;
        height: 100px;
        display: flex;
        flex-flow: row nowrap;

    }
    .mleft{
        flex:0 1 230px;
        display: flex;
        
    }
    .mmid{
        flex:1 0 auto;
        display: flex;
        flex-flow: row wrap;
    }
    .mright{
        flex: 0.1 1 auto;
        display: flex;
        flex-flow: column nowrap;
        gap:20px;
    }
    .cate_menu_lk{
        text-decoration: none;
    }
    .cate_menu_lk:hover{
        color:#f22e00;
    }
    .goods-item{
        flex:0 0 150px;
        display: flex;
        flex-flow: column nowrap;

    }
    .goods-pic{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .price_wapper{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between; 
        align-items: baseline;
    }
    .usr_info{
        display: flex;
        flex-flow: column nowrap;
        gap: 20px;
    }
    .usr_head{
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
    .usr_button{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    .usr_mytao{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-evenly;
    }
    .mytao_contect{
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
    .el-card{
        font-size: 25px;
        max-width: 200px;
        --el-card-padding: 0px;
        overflow:unset;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;

    }
</style>